﻿<!-- 管理员仪表盘页面 -->

<template>
  <div class="admin-dashboard">
    <h1 class="page-title">管理员仪表盘</h1>
    
    <div class="dashboard-stats">
      <div class="stat-card">

        <div class="stat-content">
          <h3>教师总数</h3>
          <p class="stat-value">{{ teacherCount }}</p>
        </div>
      </div>
      
      <div class="stat-card">

        <div class="stat-content">
          <h3>学生总数</h3>
          <p class="stat-value">{{ studentCount }}</p>
        </div>
      </div>
      
      <div class="stat-card">

        <div class="stat-content">
          <h3>班级总数</h3>
          <p class="stat-value">{{ classCount }}</p>
        </div>
      </div>
      
      <div class="stat-card">

        <div class="stat-content">
          <h3>练习总数</h3>
          <p class="stat-value">{{ exerciseCount }}</p>
        </div>
      </div>
    </div>
    
    <div class="dashboard-content">
      <div class="dashboard-section">
        <h2 class="section-title">最近登录活动</h2>
        <div class="section-content">
          <table class="data-table">
            <thead>
              <tr>
                <th>用户名</th>
                <th>用户类型</th>
                <th>登录时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(activity, index) in recentActivities" :key="index">
                <td>{{ activity.userName }}</td>
                <td>{{ activity.userType }}</td>
                <td>{{ activity.loginTime }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <div class="dashboard-section">
        <h2 class="section-title">系统信息</h2>
        <div class="section-content">
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">系统名称:</span>
              <span class="info-value">智能教学助手平台</span>
            </div>
            <div class="info-item">
              <span class="info-label">当前管理员:</span>
              <span class="info-value">{{ adminName }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">系统版本:</span>
              <span class="info-value">v1.0.0</span>
            </div>
            <div class="info-item">
              <span class="info-label">最近登录:</span>
              <span class="info-value">{{ lastLoginTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 统计数据
const teacherCount = ref(0);
const studentCount = ref(0);
const classCount = ref(0);
const exerciseCount = ref(0);

// 管理员信息
const adminName = ref('');
const lastLoginTime = ref('');

// 最近活动
const recentActivities = ref([]);

// 获取仪表盘数据
const fetchDashboardData = async () => {
  try {
    // 获取token
    const token = localStorage.getItem('token');
    
    // 发送请求，带上认证头
    const response = await axios.get('/api/admin/dashboard', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    
    if (response.data && response.data.success) {
      const data = response.data.data;
      
      // 更新统计数据
      teacherCount.value = data.teacherCount || 0;
      studentCount.value = data.studentCount || 0;
      classCount.value = data.classCount || 0;
      exerciseCount.value = data.exerciseCount || 0;
      
      // 更新活动记录
      if (data.recentActivities && data.recentActivities.length > 0) {
        recentActivities.value = data.recentActivities;
      }
    }
  } catch (error) {
    console.error('获取仪表盘数据失败:', error);
    
    // 使用模拟数据（实际项目中应删除）
    teacherCount.value = 28;
    studentCount.value = 320;
    classCount.value = 15;
    exerciseCount.value = 1250;
    
    // 模拟活动数据
    recentActivities.value = [
      { userName: '张老师', userType: '教师', loginTime: '2025-06-08 08:32:45' },
      { userName: '李明', userType: '学生', loginTime: '2025-06-08 08:45:12' },
      { userName: '王主任', userType: '管理员', loginTime: '2025-06-08 09:02:33' },
      { userName: '赵老师', userType: '教师', loginTime: '2025-06-08 09:12:05' },
      { userName: '刘倩', userType: '学生', loginTime: '2025-06-08 09:15:47' }
    ];
  }
};

onMounted(() => {
  // 获取管理员信息
  adminName.value = localStorage.getItem('adminName') || '管理员';
  lastLoginTime.value = localStorage.getItem('lastLoginTime') || '2025-06-08 08:00:00';
  
  // 获取仪表盘数据
  fetchDashboardData();
});
</script>

<style scoped>
.admin-dashboard {
  padding: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #333;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.teacher-icon {
  background-color: #1a73e8;
}

.student-icon {
  background-color: #ff6d00;
}

.class-icon {
  background-color: #00c853;
}

.exercise-icon {
  background-color: #aa00ff;
}

.stat-content h3 {
  font-size: 16px;
  color: #606266;
  margin: 0 0 8px 0;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.dashboard-section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  padding: 15px 20px;
  margin: 0;
  border-bottom: 1px solid #ebeef5;
  color: #333;
}

.section-content {
  padding: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.data-table th {
  font-weight: 600;
  color: #606266;
  background-color: #f5f7fa;
}

.data-table tr:hover td {
  background-color: #f5f7fa;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.info-item {
  padding: 10px;
  border-bottom: 1px dashed #ebeef5;
}

.info-label {
  font-weight: 600;
  color: #606266;
  margin-right: 10px;
}

.info-value {
  color: #333;
}

@media (max-width: 768px) {
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
}
</style>
